<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- 定义主内容区片段 -->
<div th:fragment="main-content" class="main-content">
    <!-- 顶部导航栏 -->
    <div class="header">
        <button class="toggle-btn" id="toggleBtn">
            <i class="fa fa-bars"></i>
        </button>
        <div class="user-info">
            <img src="https://img.icons8.com/color/48/000000/administrator-male--v1.png" alt="User">
            <span>AI管理员</span>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <!-- 首页内容 -->
        <div class="content-section" id="home-content">
            <div class="card">
                <div class="card-title">欢迎使用AI管理系统</div>
                <div class="card-content">
                    <p>这是一个AI管理后台框架，包含左侧菜单和右侧内容区域。</p>
                    <p>您可以点击左侧菜单切换不同功能模块。</p>
                </div>
            </div>

            <div class="card">
                <div class="card-title">AI系统概览</div>
                <div class="card-content">
                    <!-- 这里可以放置一些统计图表或数据 -->
                    <p>系统运行状态: 正常</p>
                    <p>活跃模型数量: 8</p>
                    <p>今日处理请求: 1,286</p>
                    <p>平均响应时间: 0.8秒</p>
                </div>
            </div>

            <div class="card">
                <div class="card-title">最近活动</div>
                <div class="card-content">
                    <!-- 这里可以放置一些活动列表 -->
                    <p>新模型部署完成: GPT-4 - 10分钟前</p>
                    <p>数据集更新: 图像识别训练集 - 30分钟前</p>
                    <p>系统性能优化完成 - 2小时前</p>
                </div>
            </div>
        </div>

        <!-- 用户管理内容 -->
        <div class="content-section" id="users-content" style="display: none;">
            <div class="card">
                <div class="card-title">用户管理</div>
                <div class="card-content">
                    <p>这里是用户管理模块，可以管理系统用户。</p>
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                            <tr>
                                <th>用户ID</th>
                                <th>用户名</th>
                                <th>角色</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1001</td>
                                <td>admin</td>
                                <td>管理员</td>
                                <td>活跃</td>
                                <td>
                                    <button class="btn-edit">编辑</button>
                                    <button class="btn-delete">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1002</td>
                                <td>user01</td>
                                <td>普通用户</td>
                                <td>活跃</td>
                                <td>
                                    <button class="btn-edit">编辑</button>
                                    <button class="btn-delete">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI训练内容 -->
        <div class="content-section" id="training-content" style="display: none;">
            <div class="card">
                <div class="card-title">AI训练中心</div>
                <div class="card-content">
                    <p>这里是AI训练模块，可以管理模型训练任务。</p>
                    <div class="training-stats">
                        <div class="stat-item">
                            <div class="stat-title">当前训练任务</div>
                            <div class="stat-value">3</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-title">完成训练</div>
                            <div class="stat-value">27</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-title">GPU使用率</div>
                            <div class="stat-value">78%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 其他内容区域，根据需要添加更多模块 -->
        <div class="content-section" id="models-content" style="display: none;">
            <div class="card">
                <div class="card-title">模型管理</div>
                <div class="card-content">
                    <p>这里是模型管理模块，可以查看和管理AI模型。</p>
                </div>
            </div>
        </div>

        <div class="content-section" id="datasets-content" style="display: none;">
            <div class="card">
                <div class="card-title">数据集管理</div>
                <div class="card-content">
                    <p>这里是数据集管理模块，可以上传和管理训练数据集。</p>
                </div>
            </div>
        </div>

        <div class="content-section" id="analytics-content" style="display: none;">
            <div class="card">
                <div class="card-title">性能分析</div>
                <div class="card-content">
                    <p>这里是性能分析模块，可以查看系统性能指标。</p>
                </div>
            </div>
        </div>

        <div class="content-section" id="settings-content" style="display: none;">
            <div class="card">
                <div class="card-title">系统设置</div>
                <div class="card-content">
                    <p>这里是系统设置模块，可以配置系统参数。</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>